<template>
  <div>
    <div class="mar-t--3">
      <!-- 轮播组组件 -->
      <template v-if="JSON.stringify(shopSwiper)!=='{}'">
        <custom-swiper-first :content="shopSwiper" />
        <!-- <custom-swiper-first v-if="shopSwiper.propMap.swiperStyle === '1'" :content="shopSwiper" /> -->
        <!-- <custom-swiper-second v-if="shopSwiper.propMap.swiperStyle === '2'" :content="shopSwiper" />
        <custom-swiper-third v-if="shopSwiper.propMap.swiperStyle === '3'" :content="shopSwiper" /> -->
      </template>
    </div>
    <!-- <div class="container-width">
      <div class="bgc-white mar-t-20 mar-b-20">
        <recommend-goods />
      </div>
    </div> -->
    <div
      v-loading="customLoading"
      element-loading-text="加载中"
      element-loading-background="#f5f5f5"
      class="custom-container"
    >
      <template v-for="(item, index) in customDetailPageData" :key="index" v-if="JSON.stringify(customDetailPageData) !== '{}'">
        <!-- 商品组件 -->
        <template v-if="item.componentType === 5">
          <custom-slider-first v-if="item.propMap.goodsStyle === '1'" :content="item" />
          <custom-slider-second v-if="item.propMap.goodsStyle === '2'" :content="item" />
          <custom-slider-third v-if="item.propMap.goodsStyle === '3'" :content="item" />
          <custom-slider-fourth v-if="item.propMap.goodsStyle === '4'" :content="item" />
        </template>
        <!-- 轮播组组件 -->
        <template v-if="item.componentType === 3">
          <custom-swiper-first v-if="item.propMap.swiperStyle === '1'" :content="item" />
          <custom-swiper-second v-if="item.propMap.swiperStyle === '2'" :content="item" />
          <custom-swiper-third v-if="item.propMap.swiperStyle === '3'" :content="item" />
        </template>
        <!-- 图片组组件 -->
        <template v-if="item.componentType === 4">
          <custom-picture-first v-if="item.propMap.pictureStyle === '1'" :content="item" />
          <custom-picture-second v-if="item.propMap.pictureStyle === '2'" :content="item" />
        </template>
      </template>
      <!-- 空数据展示 -->
      <none-data v-if="JSON.stringify(customDetailPageData) === '{}'" />
    </div>
    <div class="height-50" />
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    ref,
    onMounted
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'
  import {
    jumpPage
  } from '@/utils/jumpPageUtils'
  import {
    getCustomPageList
  } from '@/api/customPage/customPage'
  import customSliderFirst from '@/components/custom/customSliderFirst/index.vue'
  import customSliderSecond from '@/components/custom/customSliderSecond/index.vue'
  import customSliderThird from '@/components/custom/customSliderThird/index.vue'
  import customSliderFourth from '@/components/custom/customSliderFourth/index.vue'
  import customSwiperFirst from '@/components/custom/customSwiperFirst/index.vue'
  import customSwiperSecond from '@/components/custom/customSwiperSecond/index.vue'
  import customSwiperThird from '@/components/custom/customSwiperThird/index.vue'
  import customPictureFirst from '@/components/custom/customPictureFirst/index.vue'
  import customPictureSecond from '@/components/custom/customPictureSecond/index.vue'
  import recommendGoods from '@/pages/shop/components/recommendGoods/index.vue'
  import event from '@/model/event'
  import noneData from '@/components/noneData/index.vue'
  
  export default defineComponent({
    name: 'ShopList',
    components: {
      customSliderFirst,
      customSliderSecond,
      customSliderThird,
      customSliderFourth,
      customSwiperFirst,
      customSwiperSecond,
      customSwiperThird,
      customPictureFirst,
      customPictureSecond,
      recommendGoods,
      noneData
    },
    props: {
      shopId: {
        type: String
      },
      pageId: {
        type: String
      }
    },
    setup(props) {
      const router = useRouter()
      const shopList = ref(< any > [])
      const shopSwiper = ref(<any>{})
      const customLoading = ref(true)
      const customDetailPageData = ref({})
      const shopInfo = ref({})
      onMounted(() => {
        shopList.value = [{
            name: '1',
            goods: [{
                id: 1
              },
              {
                id: 2
              },
              {
                id: 3
              }
            ]
          },
          {
            name: '2',
            goods: [
              {
                id: 1
              },
              {
                id: 2
              }
            ]
          },
          {
            name: '3',
            goods: [{
                id: 1
              },
              {
                id: 2
              },
              {
                id: 3
              }
            ]
          }
        ]
        // shopSwiper.value = {
        //   componentType: 3,
        //   detailsId: '1458331255845359721',
        //   guideList: [
        //     {
        //       componentGuideId: '1458331255845359943',
        //       detailsId: '1458331255845359721',
        //       hasLink: 1,
        //       imgUrl: 'https://img-1.joinsun.vip/upload/237777c9828d2c7f99199389b814e4c3.jpg',
        //       linkParams: 'https://www.baidu.com/',
        //       linkTarget: 2,
        //       newPage: 0,
        //       showAuth: 1,
        //       sortNo: 0,
        //       styleType: 0
        //     },
        //     {
        //       componentGuideId: '1458331255845359944',
        //       detailsId: '1458331255845359721',
        //       hasLink: 1,
        //       imgUrl: 'https://img-1.joinsun.vip/upload/8bcc0ebb6a5a2ead5bbb123a23443b8f.jpg',
        //       linkParams: 'https://www.jd.com/',
        //       linkTarget: 2,
        //       newPage: 0,
        //       showAuth: 1,
        //       sortNo: 1,
        //       styleType: 0
        //     },
        //     {
        //       componentGuideId: '1458337855845359944',
        //       detailsId: '1458331255845679721',
        //       hasLink: 1,
        //       imgUrl: 'https://img-1.joinsun.vip//upload/65f3b9229ab83f33e62dc7018ce7a2b1.jpg',
        //       linkParams: 'https://www.jd.com/',
        //       linkTarget: 2,
        //       newPage: 0,
        //       showAuth: 1,
        //       sortNo: 1,
        //       styleType: 0
        //     }
        //   ],
        //   propMap: {
        //     swiperStyle: '2'
        //   }
        // }
        initCustomPage()
      })
      const initCustomPage = () => {
        getCustomPageList(props.pageId, 2, props.shopId).then(response => {
          customLoading.value = false
          if (response.isError) return
          let resData = response.data
          const initCustomPageData = ref([])
          const footerLinkData = ref({})
          const shopInfo = resData.shopInfo
          event.emit('detailGoodsList_shopInfo', shopInfo)
          event.emit('shopDetail_shopInfo', shopInfo)
          if (resData && resData.detailsList && resData.detailsList.length > 0) {
            for (let c = 0; c < resData.detailsList.length; c++) {
              let data = resData.detailsList[c]
              // 类型 1:固定组件 2友情链接 3:轮播组 4.图片组件 5:商品组件
              if (data.componentType === 1) {
                shopSwiper.value = data
              } else if (data.componentType === 2) {
                footerLinkData.value = data
              } else {
                initCustomPageData.value.push(data)
              }
            }
          }
          customDetailPageData.value = initCustomPageData.value
        })
      }

      return {
        shopList,
        customLoading,
        shopSwiper,
        customDetailPageData,
        initCustomPage
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;
  $recommendGoodsWidth: 200px;

  .custom-container {
    min-height: 150px;
  }
  .shop-list {
    border: #e4e4e4 1px solid;

    .infos {
      padding-top: 41px;
      width: 485px;
      box-sizing: border-box;

      .years {
        background: #fbde2d;
        border: #e3c71c 1px solid;
        color: #5C2800;
        font-size: 12px;
      }

      .rate {
        width: 75px;
        height: 14px;
        background: url('@/assets/images/icon_start_all.png') no-repeat;

        span {
          display: block;
          width: 15px;
          height: 14px;
          background: url('@/assets/images/icon_start_1.png') no-repeat;
        }
      }

      .line {
        width: 320px;
        height: 1px;
        background: #e5e5e5;
      }

      .shop-data {
        ul {
          &:after {
            content: '';
            display: block;
            clear: both;
            font-size: 0;
          }

          li {
            width: 183px;
            float: left;
            padding: 6px 0;
          }
        }
      }
    }

    .goods-bar {
      width: $recommendGoodsWidth;
    }

    .el-image {
      width: $recommendGoodsWidth;
      height: 214px;
      cursor: pointer;
      display: block;
    }

    .goods-info {
      width: $recommendGoodsWidth;
      // height: 142px;
      padding: 8px 0 8px 0;
      box-sizing: border-box;
    }

    ._line-1 {
      /* line-height: 1.4; */
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      word-break: break-word;
    }
  }
</style>
